<template lang="pug">
transition(name="toast")
  .toast-container(v-if="toast.show")
    .toast(:class="{'success' : toast.type === 'success'}") {{toast.content}}
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'toast',
  computed: {
    ...mapState({
      toast: state => state.ui.toast
    })
  },
  watch: {
    'toast.show' (v) {
      if (v) {
        setTimeout(() => {
          this.message({ show: false })
        }, 3000)
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.toast-leave-active {
  transition: opacity 1s ease;
}
.toast-enter-active,.toast-leave-active {
  opacity: 0
}
.toast-enter-active .toast,
.toast-leave-active .toast {
  top: -200px;
  opacity: 0;
}
.toast {
  transition: all 1s;
  position: fixed;
  left: 50%;
  top: 50px;
  min-width: 300px;
  border: 1px solid #ebeef5;
  text-align: center;
  transform: translateX(-50%);
  padding: 10px;
  border-radius: 5px;
  background: #fef0f0;
  color: #f56c6c;
  font-size: 14px;
  z-index: 99999;
  &.success {
    background: #f0f9eb;
    color: #67c23a;
  }
}
</style>